<!DOCTYPE html>
<html>
<head>
<title>Measure Tools</title>
<meta charset="utf-8">
<!--script src="http://weapp.googlecode.com/svn/api/weapp.min.js"></script-->
<script src="../../WeApp.js"></script>
<style type="text/css">
body {
    font-size: smaller;
}
label:hover {
    cursor: pointer;
    text-decoration: underline;
}
#result {
    margin-top: 5px;
    padding: 2px;
    color: #ff4c00;
    border: solid 1px gray;
}
</style>

<script>
Measure = top.Weiran.Class(WeApp, {
    dictionaries: {
        'en': {
            'line': 'Draw a line and get its length',
            'area': 'Draw a polygon and get its area',
            'lineTitle': 'Measure Length',
            'areaTitle': 'Measure Area'
        },
        'zh-CN' : {
            'line': '在地图上画条路径并测量其距离',
            'area': '在地图上画多边形并测量其面积',
            'lineTitle': '测量距离',
            'areaTitle': '测量面积'
        }
    },
    
    // {OpenLayers.Control.Measure}
    measureTools: null,

    initialize: function (options) {
        WeApp.prototype.initialize.apply(this, arguments);
        
        top.jQuery('#lineLabel', document).text(this.i18n('line'));
        top.jQuery('#areaLabel', document).text(this.i18n('area'));
    },

    run: function () {
        WeApp.prototype.run.apply(this, arguments);
        
        // create the measure tool
        this.createMeasureTools();

        // add event handlers to radio buttons
        top.jQuery('#line, #area', document).change(this.toggleMeasureTool(this));
        
        // activate line by default
        top.jQuery('#line, #area', document).trigger('change');
    },
    
    createMeasureTools: function () {
        // style the sketch fancy
        var sketchSymbolizers = {
            "Point": {
                    pointRadius: 10,
                    graphicName: "cross",
                    strokeWidth: 1,
                    strokeColor: "#ff4c00",
                    strokeOpacity: 1,
                    fillOpacity: 0
            },
            "Line": {
                    strokeWidth: 2,
                    strokeColor: "#ff4c00",
                    strokeOpacity: 1
            },
            "Polygon": {
                    strokeWidth: 2,
                    strokeColor: "#ff4c00",
                    strokeOpacity: 1,
                    fillColor: "#ff4c00",
                    fillOpacity: 0.1
            }
        };
        var style = new top.OpenLayers.Style();
        style.addRules([
            new top.OpenLayers.Rule({symbolizer: sketchSymbolizers})
        ]);
        var styleMap = new top.OpenLayers.StyleMap({"default": style});
        
        // create measure controls
        this.measureTools = {
            line: new top.OpenLayers.Control.Measure(
                top.OpenLayers.Handler.Path, {
                    title: this.i18n('lineTitle'),
                    'geodesic': true,
                    'persist': true, 
                    'handlerOptions': {'layerOptions': {'styleMap': styleMap}}
                }
            ),
            area: new top.OpenLayers.Control.Measure(
                top.OpenLayers.Handler.Polygon, {
                    title: this.i18n('areaTitle'),
                    'geodesic': true,
                    'persist': true,
                    'handlerOptions': {'layerOptions': {'styleMap': styleMap}}
                }
            )
        };
        
        var control;
        for(var key in this.measureTools) {
            control = this.measureTools[key];
            control.events.on({
                "measure": function(evt) {this.onMeasure(evt)},
                "measurepartial": function(evt) {this.onMeasure(evt)},
                scope: this
            });
            this.getMap().addControl(control);
        }
    },
    
    toggleMeasureTool: function(app) { return function() {
        if (this.checked) {
            for (var key in app.measureTools) {
                if (this.id == key) {
                    app.measureTools[key].activate();
                    document.getElementById('result').innerHTML = 
                        (this.id=='line') ? '0.000000 m' : '0.000000 m<sup>2</sup>';
                } else {
                    app.measureTools[key].deactivate();
                }
            }
        }
    };},
    
    // measure event handler
    onMeasure: function(evt) {
        var res = "";
        if(evt.order == 1) {
            res = evt.measure.toFixed(6) + " " + evt.units;
        } else {
            res = evt.measure.toFixed(6) + " " + evt.units + "<sup>2</sup>";
        }
        document.getElementById('result').innerHTML = res;
    },

    destroy: function () {
        // destroy the measure
        var control;
        for(var key in this.measureTools) {
            control = this.measureTools[key];
            control.events.un({
                "measure": function(evt) {this.onMeasure(evt)},
                "measurepartial": function(evt) {this.onMeasure(evt)},
                scope: this
            });
            this.getMap().removeControl(control);
            control.destroy();
            control = null;
        }
        this.measureTools = null;
        
        WeApp.prototype.destroy.apply(this, arguments);
    },
    
    // This event is fired when the window is selected.
    onSelect: function() {
        WeApp.prototype.onSelect.apply(this, arguments);
        
        top.jQuery('#line, #area', document).trigger('change');
    },
    
    // This event is fired when the window is deselected.
    onDeselect: function() {
        WeApp.prototype.onDeselect.apply(this, arguments);
        
        for(key in this.measureTools) {
            this.measureTools[key].deactivate();
        }
    },
    
    onIconize: function() {
        WeApp.prototype.onIconize.apply(this, arguments);
        
        for(key in this.measureTools) {
            this.measureTools[key].deactivate();
        }
    },

    CLASS_NAME: "Measure"
});

function main(options) {
    var app = new Measure(options);
    app.run();
}
</script>
</head>

<body>
    <input type='radio' name='method' id='line' checked='checked' />
    <label for='line' id='lineLabel'>Measure length</label>
    <br />
    <input type='radio' name='method' id='area' />
    <label for='area' id='areaLabel'>Measure area</label>
    <br />
    <p id='result'>0.000000 m</p>
</body>
</html>
